<template>
	<view class="verify">
		<view class="verify-code" v-show="checkType === 1">
			<view class="verify-role ">
			   <view class="verify-role-item flex--col verify-role--volunteer" v-if="role === Role.ROLE_VOLUNTEER">
				   <VerifyExplain :success="status ===  VERIFY_SUCCESS">
					   <template #mainExplain>
							<text>输入验证码后碰面成功</text>   
						</template>
					   <template #subExplain>
							<text>验证码为盲人持有</text>
					   </template>
				   </VerifyExplain>
				   <VerifyInput @validateCaptcha="handleValidateCaptcha"></VerifyInput>
			   </view>
			   <view class="verify-role-item flex--col verify-role--blind"  v-if="role === Role.ROLE_BLIND" >
				   <VerifyCode>
					   <slot name="verifyCode"></slot>
					</VerifyCode>
				   <VerifyExplain :success="status === VERIFY_SUCCESS">
					   <template #mainExplain>
					   		<text>等待志愿者输入验证码</text>
					   	</template>
					   <template #subExplain>
					   		<text>志愿者正在赶来的路上...</text>
					   </template>
				   </VerifyExplain>
			   </view>
			</view>
		</view>
		<view class="verify-map" v-show="checkType === 2">
			<slot name="locationMap"></slot>
			
		</view>
	
		<view class="popup popup--absolute popup-category">
			<PanelCategory  :activeIndex="checkType" @changeActiveIndex="handleChangeCheckType">
				<template #category-1>
					<text>碰面</text>
				</template>
				<template #category-2>
					<text>地图</text>
				</template>
			</PanelCategory>
		</view>	
	</view>
</template>

<script>
	import LocationMap from "@/components/LocationMap/LocationMap.vue"
	import VerifyRole from "./VerifyRole.vue"
	import PanelCategory from "@/components/PanelCategory/PanelCategory.vue"
	import VerifyInput from "./VerifyInput.vue"
	import VerifyCode from "./VerifyCode.vue"
	import VerifyExplain from "./VerifyExplain.vue"
	import {ONLINE_SUCCESS,VERIFY_SUCCESS} from "@/core/constant/travel.js"
	import * as Role from "@/core/constant/role.js"
	
	export default {
		components:{
			PanelCategory,
			VerifyRole,
			LocationMap,
			VerifyInput,
			VerifyCode,
			VerifyExplain
		},
		emits:['validateCaptcha'],
		props:['verifyStatus','role','userPositions'],
		data(){
			return {
				checkType:1,
				ONLINE_SUCCESS,
				VERIFY_SUCCESS,
				Role
			}
		},
		methods:{
			handleChangeCheckType(type){
				this.checkType = type
			},
			handleValidateCaptcha(inputCapthca){
				this.$emit('validateCaptcha',inputCapthca)
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.verify{
		position:relative;
		width:100%;
		height:50%;
		
		margin-top:auto;
	}
	
	.verify-code,.verify-map{
		height:100%;
	}
	
	.popup-category{
		left:50%;
		bottom:10%;
		translate: -50% -50%;
		width:80%;
		z-index:98;
	}
	
	.verify-role{
		height:100%;
	}
	
	.verify-role-item{
		align-items: center;
		height:100%;
		gap:5%;
	}
</style>